<script setup>
import { ref, inject, onMounted } from "vue";
// 通过inject方法可以取出顶层组件app注入的mitter组件通信工具
const mitter = inject("mitter");
// 输入的值 要传给另一个组件
const data1 = ref("");
// 收到的值 来自另一个组件
const data2 = ref("");
onMounted(() => {
  // 监听订阅推送
  mitter.on("getVform2", (e) => {
    data2.value = e;
  });
});

const giveToCom2 = () => {
  // 触发另一个组件监听的getVform1事件并且传参
  mitter.emit("getVform1", data1.value);
};
</script>

<template>
  <h2 class="imp">兄弟组件 1</h2>
  <span class="tips">请输入要传给组件2的值</span>
  <input type="text" v-model="data1" />
  <h3>输入的值是 - {{ data1 }}</h3>
  <!-- 触发button的函数并且触发组件回调 -->
  <button @click="giveToCom2">传值给兄弟组件 2</button>

  <h2 class="impx">从兄弟组件2收到的是 - {{ data2 }}</h2>
</template>

<style scoped>
.imp {
  color: red;
}
.impx {
  color: rgb(21, 53, 112);
}
.tips {
  font-size: 18px;
  font-weight: 600;
}
input {
  margin-left: 20px;
}
button {
  width: 160px;
  height: 30px;
  font-weight: 600;
  font-size: 28;
}
</style>
